<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=5.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .app {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        font-family: "楷体";
      }
      .app .tips {
        margin-bottom: 40px;
        margin-right: 30px;
      }
      .container {
        width: calc(var(--cellSize) * var(--x));
        display: flex;
        flex-wrap: wrap;
        perspective: 800px;
      }
      .container .item {
        border: 1px solid #000;
        height: var(--cellSize);
        width: var(--cellSize);
        position: relative;
        font-size: 20px;
      }
      .container .item.not_border {
        border: none;
      }
      .container .item.split {
        border: none;
      }
      .container .item.range {
        border: none;
        border-left: 1px solid #000;
      }
      .container .item .inner {
        position: absolute;
        width: var(--chessSize);
        height: var(--chessSize);
        border: 1px solid #ccc;
        top: calc(var(--chessSize) / -2);
        left: calc(var(--chessSize) / -2);
        z-index: 1;
        transition: 0.3s;
        text-align: center;
        line-height: var(--chessSize);
        color: #fff;
        cursor: pointer;
      }
      .container .item .inner.black {
        top: calc(var(--chessSize) / -2);
        left: calc(var(--chessSize) / -2);
        background: #000;
        border-radius: 50%;
      }
      .container .item .inner.red {
        bottom: calc(var(--chessSize) / -2);
        left: calc(var(--chessSize) / -2);
        background: #f00;
        border-radius: 50%;
      }
      .container .item .inner.selected {
        transform: translate3d(0, 0, 50px) rotateX(45deg);
        border: 1px solid #409eff;
        box-shadow: 0 0 5px #409eff;
      }
      .container .item .inner.can_move {
        position: relative;
      }
      .container .item .inner.can_move::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        background: #67c23a;
        border-radius: 50%;
        box-shadow: 0 0 5px #67c23a;
      }
      .game_tips {
        position: absolute;
        left: 50%;
        top: 20px;
        padding: 5px 10px;
        border: 1px solid transparent;
        border-radius: 5px;
        animation: tips 3s forwards;
      }
      .game_tips.warning {
        background: #fdf6ec;
        color: #e6a23c;
        border-color: #e6a23c;
      }
      .game_tips.success {
        background: #f0f9eb;
        color: #67c23a;
        border-color: #67c23a;
      }
      .game_tips.error {
        background: #fef0f0;
        color: #f66c7d;
        border-color: #f66c7d;
      }
      @keyframes tips {
        0% {
          opacity: 0;
          transform: translateY(-20px);
        }
        40% {
          opacity: 1;
          transform: translateY(20px);
        }
        50% {
          opacity: 1;
          transform: translateY(20px);
        }
        60% {
          opacity: 1;
          transform: translateY(20px);
        }
        100% {
          opacity: 1;
          transform: translateY(-100px);
        }
      }
      .game {
        position: relative;
      }
      .mid_tips {
        --padding: 60px;
        position: absolute;
        left: 50%;
        top: 45%;
        transform: translate(-50%, -50%);
        z-index: -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-left: var(--padding);
        padding-right: calc(var(--padding) + var(--cellSize));
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="app">
      <h2 class="tips">当前操作方: <span style="color: red">红方</span></h2>
      <div class="game">
        <div class="container"></div>
        <div class="mid_tips">
          <span>楚河</span>
          <span>汉界</span>
        </div>
      </div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>
